<template>
	<view>
		<view class="headImg">
			<image class="samePar" mode="aspectFill" :src="getStaticFilePath('zxsHead.png')"></image> 
		</view>
		<view class="userInfo">
			<view class="userDec spaceBet">
				<view class="alignCen">
					<image class="aqImg" :src="getStaticFilePath('aq.png')"></image>
					<text class="hasBold">安全保障</text>
				</view>
				<view class="fTit">
					<text>专业</text>
					<text class="point">•</text>
					<text>安全</text>
					<text class="point">•</text>
					<text>隐私</text>
				</view>
			</view>
			<view class="infoCon">
				<view class="nameBox spaceBet">
					<view class="userName hasFlex">
						<text class="name">张珊珊</text>
						<view class="tag hasFlex">
							<image class="xz" :src="getStaticFilePath('xunzhang.png')"></image>
							<text>资深咨询师</text>
						</view>
					</view>
					<view class="price">
						<text>¥</text>
						<text class="priceNum">500</text>
						<text>/时</text>
					</view>
				</view>
				<view class="zxsLevel hasFlex">
					<view class="comItem levelItem">濮阳心理反倒是离开房间</view>
					<view class="comItem levelItem">濮阳心理反</view>
					<view class="comItem levelItem">濮阳心理反倒是离开房间</view>
				</view>
				<view class="scLy hasFlex">
					<view class="comItem lyItem">情绪压力</view>
					<view class="comItem lyItem">婚姻家庭</view>
					<view class="comItem lyItem">婚姻说家庭</view>
				</view>
			</view>
			<!-- 咨询经验 -->
			<view class="modItem padd">
				<view class="modCon hasFlex">
					<view class="experience posAbso ltzero">
						<image class="member" :src="getStaticFilePath('member.png')"></image>
						<text>咨询经验</text>
					</view>
					<view class="zxExpItem">
						<view class="zxNum">
							<text class="font">1205</text>
							<text>人次</text>
						</view>
						<view class="expTit">咨询人次</view>
					</view>
					<view class="zxExpItem">
						<view class="zxNum">
							<text class="font">14</text>
							<text>年</text>
							<text>零</text>
							<text class="font">2</text>
							<text>个</text>
							<text>月</text>
							<!-- <template v-if="calWrokRange(zxsInfo.workRange).length > 1">
								<text class="font">{{calWrokRange(zxsInfo.workRange)[0]}}</text>
								<text>年</text>
								<text>零</text>
								<text class="font">{{calWrokRange(zxsInfo.workRange)[1]}}</text>
								<text>个</text>
								<text>月</text>
							</template>
							<template v-else>
								<text class="font">{{calWrokRange(zxsInfo.workRange)[0]}}</text>
								<text>年</text>
							</template> -->
						</view>
						<view class="expTit">从业年限</view>
					</view>
					<view class="zxExpItem">
						<view class="zxNum">
							<text class="font">2563</text>
							<text>小时</text>
						</view>
						<view class="expTit">服务时长</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
	}
</script>

<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss" scoped>
	.headImg{
		height: 750rpx;
	}
	.userInfo{
		margin-top: -120rpx;
		position: relative;
		z-index: 2;
		$font:'Staatliches';
		--hei:40rpx;
		.userDec{
			height: 90rpx;
			background: $sq-fue;
			border-radius: 30rpx 30rpx 0 0;
			align-items: center;
			padding: 0 30rpx;
			color:$sq-main0;
			font-size: 28rpx;
			.hasBold{
				font-weight: 600;
			}
			.aqImg{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			.fTit{
				color: $pss-sq-main;
				.point{
					margin: 0 15rpx;
				}
			}
		}
		.infoCon{
			padding: 30rpx;
			background: $sq-fuf;
		}
		.nameBox,
		.userName{
			align-items: center;
		}
		.name{
			font-size: 36rpx;
			color: $sq-main0;
			font-weight: 600;
		}
		.tag{
			padding: 0 10rpx;
			height: 40rpx;
			align-items: center;
			color: $pss-sq-main;
			background: $sq-fue;
			border-radius: 8rpx;
			margin-left: 20rpx;
			font-size: 24rpx;
			.xz{
				width: 32rpx;
				height: 32rpx;
				margin-right:10rpx;
			} 
		}
		.price{
			color: $pss-sq-red;
			font-size: 26rpx;
		}
		.priceNum{
			font-family:$font;
			font-weight: 600;
			font-size: 36rpx;
			margin: 0 5rpx;
		}
		.zxsLevel{
			margin:20rpx 0;
			flex-wrap: wrap;
		}
		.scLy{
			flex-wrap: wrap;
		}
		.comItem{
			height: var(--hei);
			line-height: var(--hei);
			color: $sq-main0;
			margin-right: 30rpx;
		}
		.levelItem{
			font-size: 26rpx;
		}
		.lyItem{
			font-size: 24rpx;
			background: $sq-fue;
			padding: 0 10rpx;
			color: $sq-main8;
			border-radius: 8rpx;
		}
		.modItem{
			margin:30rpx 0 0;
		}
		.modCon{
			border-radius: 26rpx;
			border: 4rpx solid $sq-fue;
			padding: 70rpx 0 30rpx;
			position: relative;
			.experience{
				height: 46rpx;
				line-height: 46rpx;
				background:$sq-fue;
				font-size: 26rpx;
				color: $pss-sq-main;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				border-radius: 26rpx 0 26rpx 0;
			}
			.member{
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
		.zxExpItem{
			flex: 1;
			text-align: center;
			color: $sq-main8;
			.zxNum{
				font-size: 26rpx;
			}
			.font{
				font-family: $font;
				color: $pss-sq-main;
				font-size: 36rpx;
				font-weight: 600;
				margin: 0 5rpx;
			}
			.expTit{
				font-size: 26rpx;
				margin-top: 5rpx;
			}
		}
	}
	
</style>